<template>
	<uni-popup ref="popup" type="bottom">
		<view class="popup-container">
			<view class="popup-header">
				<text>📻 最近播放</text>
				<button class="close-btn" @click="closePopup()">关闭</button>
			</view>
			<scroll-view scroll-y class="history-list">
				<view v-for="record in playbackRecords" :key="record.stationuuid" class="history-item"
					@click="handleItemClick(record)">
					<SafeImage :src="record.favicon" class="cover" mode="aspectFill" />
					<view class="info">
						<text class="name">{{ record.name }}</text>
					</view>
				</view>
				<view v-if="!playbackRecords.length" class="empty">暂无播放记录</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import { usePlayerStore } from '@/stores/usePlayerStore';
import { computed, ref, watch } from 'vue';
import SafeImage from '@/components/SafeImage/SafeImage.vue';
import type { Station } from '@/common/types/interface';
const popup = ref(UniPopup);
const playerStore = usePlayerStore();
const playbackRecords = computed(() => playerStore.histories.slice(0, 10));
const handleItemClick = (record: Station) => {
	playerStore.switchStation(record);
	closePopup();
}
const closePopup = () => popup.value.close();
const openPopup = () => popup.value.open();
defineExpose({ openPopup, closePopup });
</script>

<style scoped>
.popup-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
	border-radius: 24rpx 24rpx 0 0;
	padding: 24rpx;
	color: white;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	/* 两端对齐 */
	align-items: center;
	margin-bottom: 16rpx;
}

.popup-header text {
	flex: 1;
	text-align: left;
	/* 标题靠左 */
}

.history-list {
	max-height: 60vh;
}

.history-item {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.cover {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
	/* 图片不缩小 */
}

.info {
	margin-left: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	/* 占据剩余空间 */
}

.name {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 80vw;
	/* 限制最大宽度，防止撑爆 */
}

.time {
	font-size: 24rpx;
	color: #888;
}

.loading-tip,
.no-more,
.empty {
	text-align: center;
	color: #999;
	margin: 24rpx 0;
}

.close-btn {
	background: transparent;
	color: #B829F7;
	font-size: 16px;
	flex-shrink: 0;
	margin-right: 24rpx;
}
</style>